Este bonito menú trabaja con jQuery y es creación de Codrops está adaptado a menor tamaño que el original para poder mostrarlo en esta entrada pero las explicaciones nos darán como resultado un menú de 800px de ancho y 300px de alto que son las medidas de las imágenes.
Ver demo original del autor en Codrops

Los estilos los añadiremos situándonos en plantilla edición de HTML justo después de la etiqueta ]]></b:skin>

<style type='text/css'>
.rotator{
background-color:#111;
width:800px;
height:300px;
margin:0px auto;
position:relative;
font-family:&#39;Myriad Pro&#39;,Arial,Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
letter-spacing:-1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:52px;
line-height:52px;
background-color:#222;
margin:1px -20px 1px 0px;
opacity:0.7;
color:#f0f0f0;
font-size:20px;
border:2px solid #000;
border-right:none;
outline:none;
text-shadow:-1px 1px 1px #000;
-moz-border-radius:10px 0px 0px 20px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:10px;
border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
line-height:52px;
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-shadow:-1px 1px 1px #000;
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
</style>

En el mismo sitio y a continuación añadiremos el contenido del siguiente archivo
Si ya estamos utilizando jQuery para algún otro efecto omitimos el siguiente paso, de utilizarlo por primera vez añadiremos también lo siguiente:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Cada presentación contiene un bloque y es la parte que debemos modificar, que serán el título de la pestaña del menú, el título del contenido, la descripción, la url de la imagen y el enlace con el texto "Sigue..." es algo así:

<li><a href="rot4">Título-pestaña-1</a><div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción1
<a href="#" class="more">Sigue...</a></div>
</div>
</li>

Y el código completo para el menú que añadiremos en un gadget de HTML sería el siguiente:

<div class="rotator">
<ul id="rotmenu">
<li><a href="rot1">Título pestaña-1</a>
<div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción 1
<a href="#" class="more">Sigue...</a>
</div>
</div>
</li>
<li><a href="rot2">Título-pestaña-2</a><div style="display:none;">
<div class="info_image">url-imagen-2</div>
<div class="info_heading">
Texto-contenido-2</div>
<div class="info_description">
Aquí texto descripción 2
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot3">Título-pestaña-3</a><div style="display:none;">
<div class="info_image">url-imagen-3</div>
<div class="info_heading">
Texto-contenido-3</div>
<div class="info_description">
Aquí texto descripción 3
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot4">Título-pestaña-4</a><div style="display:none;">
<div class="info_image">url-imagen-4</div>
<div class="info_heading">
Texto-contenido-4</div>
<div class="info_description">
Aquí texto descripción 4
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot5">Título-pestaña-5</a><div style="display:none;">
<div class="info_image">url-imagen-5</div>
<div class="info_heading">
Título-contenido-5</div>
<div class="info_description">
Aquí texto descripción 5
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
</ul>
<div id="rot1">
<img src="url-imagen-1" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1>
</h1>
</div>
<div class="description">
<p>
</p>
</div>
</div>
</div>

Título pestaña-1, 2, 3, 4, 5 escribimos el título del contenido.
url-imagen-1, 2, 3, 4, 5 pegamos la url de la imagen tal y como la copiamos sin añadir la etiqueta de     imagen.
Texto-contenido-1, 2, 3, 4, 5 Escribimos la descripción que se mostrará después del título.
Sigue... lo podemos sustituir por cualquier otro texto.
Hay una parte que dice:
<a href="#" class="more">Sigue...</a>
esa parte la podemos utilizar como enlace, si por ejemplo deseamos enlazar una entrada o una página estática copiamos la url que deseamos enlazar y la pegamos sustituyendo la almohadilla. De esa forma al marcar sobre "Leer más... nos llevará al sitio que enlazamos.
MamaNunes

:O Uauuuuu!! Que lindo!!!! Gracias querida!

Responder
Gem@

:: Me alegra que te guste MamaNunes :D

Responder
Juan Carlos P

Tengo un problema con esta entrada Gema
http://gemablog-.blogspot.com/2007/06/nube-de-etiquetas.html

Te dejé un comentario pero creo que no lo viste asi que te lo paso de nuevo.

Sabes yo uso desde hace tiempo esta nube, pero quisiera saber si es posible hacer que algunas de las etiquetas no aparezcan, así como la nube de Blogger que puedes elegir cuáles etiquetas aparecen y cuáles no.

Es que yo quiero seguir usando esta nube de etiquetas y no la de Blogger :)

Porfa ojalá que sea posible porque sino me verá forzado a usar la de Blogger :(

Una abrazo!

Responder
Mr. Chapter

¡Superenhorabuena gema!
ya estas en el 1er puesto de los premios 20blogs :D

Responder
Unknown

:0 una pereciosura :D

Vamos Julia que ya tenemos el primer puesto! olé olé!

Responder
El obediente universitario

Está muy bien el blog, de hecho hace tiempo que lo sigo, y además está en el 1r puesto de los premos 20minutos, enhorabuena. Acabo de empezar yo uno, y me iría muy bien tener algun que otro seguidor, así que te invito que te pases por él y que si te gusta cliques en seguir en la columna derecha y lo sigas. Gracias, un saludo.
www.lapizarradelaslamentaciones.blogspot.com

Responder
Gem@

:: Juan Carlos P la nube de etiquetas que estás usando trabaja con un script, no sé la forma de modificarlo si es que se puede para ocultar algunas etiquetas, sin embargo puedes hacer eso si la nube la creas en html, es algo a´si como yo la tengo que puedes escoger el tipo de fuente, tamaño y color:
http://gemablog-.blogspot.com/2009/05/nube-de-etiquetas-con-html.html

:: Así es Raúl pero aún quedan unos días en los que pueden haber cambios, tómalo con calma sólo es un concurso ;)

:: Graciela jajaja estáis revolucionados! tranquilidad mujer que faltan cuatro días :D

:: El obediente universitario y gracias por la invitación :)

Responder
Cult

Genial menú y merecido el primer puesto ojala ganes ;)

Responder
La hormiguita

Muy buen menú.... !!!! me encantó... gracias y faltan 4 días pero no creo que cambie mucho...
Cariños

Responder
Marta

Precioso! además me encanta todo lo que publica Codrops.

Felicidades wapa! yo creo que el concurso (y premio) es tuyo, y bien merecido!

Besossssssss

Responder
Carlos Javier

Me gusta mucho el diseño Gem@... esta estupendo..


saludos..

Responder
Jose Manuel (EL Gruista)

Gracias es muy bonito

Responder
Mauri

gracias ;) ..quedó bastante mejor que como estaba.lo dejaré así por unos dias y me dedicaré a escribir un post.Beso.(tienes razón.no pude votar.pero al menos lo intenté) <3

Responder
Anónimo

Grazie dal italia , un Widget molto utile e bello.

Responder
Adrián J. Messina

De lujo, muy llamativo y de diseño super elegante.
Gracias por compartirlo.

Responder
Gem@

:: Gracias por el comentario Watesam, bienvenido :)
:: Cariños La hormiguita, cuatro días dan mucho de sí :D

:: Gracias Malina, lo que no ocurre en un año puede ocurrir en un día, toca esperar.
Sobre Codrops tiene unas galerías que he puesto en práctica en algún blog y quedan fantásticas.

:: Me alegra que te guste Carlos Javier :)

:: Gracias Jose Manuel (EL Gruista) y yo que te hacía albañil :S

:: juan_santiago mejor así porque es una imagen muy pequeña para lo que deseabas hacer, con ese generador es como jugar :)

:: vincicoppolas grazie per la vostra gentile visita molto :)

:: Adrián J. Messina me encantó, tuve que probarlo a la fuerza :)

Responder
Unknown

Hola Gema,

he intentado implementar este menú en un blog, pero no consigo que cambie la imagen, ni el titulo de cada diapositiva, ni el texto,... se queda fijo con una imagen :S

Salvo pequeñas modificaciones (tamaño) todo está tal y como tu lo presentas... donde está el error?

El blog es este: http://mvhairstudio.blogspot.com

Responder
La hormiguita

Hola, quería guardar este post como pdf, con una extencón de Firefox, que enseñó Jmiur en su blog y tu página no se puede... sabías???? Yo porque me la quería guardar, ahora no tengo tiempo de hacerla.
:O

Responder
Gem@

:: xOsse dorrío yo diría que te falta un script que viene al final del archivo listo para descargar.

:: No sé cómo funciona esa extensión La hormiguita :S

Responder
Cárpena Creativos

Esta excelente...... A PROBARLO, :D gracias

Responder
Gem@

:: Sabía que te gustaría Jaime :D

Responder
Silvialaloki

Gema eres una pasada nos das unas ideas fabulosa a los k empezamos en el mundo de paginas webs y blogs y dandonos el código todavia más.

Gracias

Responder
Unknown

voy a probar de nuevo. Gracias Gem@ ;)

Responder
Gem@

:: Gracias por el comentario Silvialaloki bienvenida :)

:: xOsse dorrío sólo tienes que abrir el archivo que pongo para descargar y copiar el último script, sólo el último el otro ya lo tienes alojado en un servidor externo.

Responder
Unknown

Sim amada Gem@ eu tengo un comentario ha hacer te!

Muito obrigada querida amiga!

Vou levar um banner teu a todos os meus blogs,você merece querida amiga!

Beijos!

Responder
Gem@

:: Gracias Taillard :)

Responder
Unknown

Gem@ minha fofa!Preciso de ajuda para colocar esses arquivos no novo blogger templates.
Eu usei o css para colocar o primeiro codigo.Despois entrei no blog citado para entender aonde colocar os arquivos,e o blogger não aceita.
Por favor diga-me aonde posso colocar a segunda e terceira parte do tutorial?

css/ ok
Ta complicado amiga!
Desculpe-me mas isso não é tão simples como pinta rainha!:$
CSS=STYLES=SCRYPTS=Tudo junto amiga?
Ou seja depois da SKIN?

Responder
Gem@

:: Taillard Tudo junto.

1º CSS
2º script de jQuery
--------------------------------------
3º paso en un gadget de HTML/Javascript

Responder
Mercedes España

Hola Gema, no consigo que se vean las imágenes y me encanta este menu, cópio todo lo que dices y todos los pasos pero nada,

http://pruebamarijuli.blogspot.com/
Muchas gracias por todo lo que haces.
Un besote

Responder
Gem@

:: Mercedes España, en la plantilla prueba a añadir jquery.min.js en primer lugar incluso que los estilos.

Responder
Mercedes España

src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript

Hola Gema supongo que dices este código, ¿donde estan los estilos?
Gracias y saludos

Responder
Mercedes España

Nada hija ni poniéndolo al principio, que podrá ser tb puse otra plantilla pero nada
me tiene aburrida ,,, ayuda porfa.

Responder
Unknown

Amorrreee!Consegui colocar o nosso amado menu em movimento!
E que lindo,alias que maravilla que ficou Gem@!
Mas um detalhe amigaEu somente consegui usando um modelo antigo do blogger.
Ficou super fofo!
Gracias mia rainha!

Responder
Unknown

Mas não esta mudando a imagem ou seja as imagens no cambian!
Choreiii!!!:(

Responder
Gem@

:: Mercedes, sigue los pasos de la entrada, añade las cosas una sola vez y sin imágenes no podrás nunca ver el efecto :S

:: Taillard si no veo el ejemplo no sé donde está el error :S

Responder
DjfOXMix

lo acabo de lograr, agrege todas las imagenes y nada :( y segui el tutorial al pie de la letra

:(

Responder
Gem@

:: Tienes el ejemplo online que pueda verlo? ¿dónde?

Responder
DjfOXMix

Lo logre, segui tu instrucciones de cambiar el codigo de java al principio, pero me gustaria ver lo de la velocidad de cambio de imagenes y fluides... veo que se ve mas lento en el mio la direccion gema es

http://radioportalfoxmix.blogspot.com

Responder
kaitoren

Hola, buenas. :)

He añadido esta aplicación a mi bluej y en principio va como la seda. Muchas gracias. Pero el margen del panel se come el final de las frases y por mucho que trastee el código no veo forma de arreglar esto. Míralo, para que veas a qué me refiero:

http://directoalaestanteria.blogspot.com/

¿Tú que tienes un ojo más entrenado, podrías ayudarme a dejarlo más presentable, por favor?

Muchas gracias de antemano y un saludo.

Responder
Gem@

:: Si te refieres al título que llega al margen derecho la solución es añadir un título más corto o disminuir la fuente de tamaño.
Eso lo puedes hacer en:
.rotator .heading h1{
line-height:52px;
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}

Con font-size:46px puedes arreglar el tamaño de letra :)

Responder
kaitoren

Ains, no cambia. Jopé. He puesto 26px, 2px y 2600px y no cambia lo más mínimo. No sé por qué. Qué extraño. :(

¿Y no podría acortar la bandejita de la descripción? Fíjate que la de tu ejemplo no llega a tocar las pestañas de la derecha y en mi blog las pasa por encima.

Responder
kaitoren

Vale, ya lo he arreglado más o menos. :D Gracias de todas formas. Por cierto, ya que estoy, aprovecho: ¿se puede ampliar el tiempo de cambio entre pestañas? Es que va un poquito rápido. xDD

Un saludete.

Responder
SelGomez

Perdón pero no me funciona el Menú. No se mueve y no me funciona. Aquí el Blog > http://selenagomez-selgomez.blogspot.com

Responder
Gem@

:: SelGomez tienes código repetido en tu plantilla, prueba en otro blog tal y como está explicado verás como funciona ;)

Responder
Alvaro

estoy tratando de instalarlo y la verdad que queda muy feo no se porque, me gustaria que le hecharas un vistaso, quinceanerasblog.com gracias

Responder
Gem@

:: Pues no lo veo :S

Responder
PACHAMAMA SANT ANDREU

Hola Gemma
otra vez por aqui haciendote preguntillas pero sera que soy un poco taruguillo.
He intentado implementar esto en mi blog y no hay manera.
es el suiguiente
http://pachamamacat.blogspot.com/

muchisimas gracias

Responder
PACHAMAMA SANT ANDREU

Buenas Gemma
Hice lo que tu consejo que está más arriba y funcionó.
"Mercedes España, en la plantilla prueba a añadir jquery.min.js en primer lugar incluso que los estilos."

Muchas gracias

Responder
Gem@

:: Genial entonces PACHAMAMA :)

Responder
PACHAMAMA SANT ANDREU

Hola otra vez
Como te dije ya me funciona bien pero los botonews de la derecha no dejan ver la foto y tambien hay una zona blanca al lado de ellos que no se como quitarla.
http://pachamamacat.blogspot.com

Muchas gracias

Responder
Gem@

:: Mira si fueran las imágenes, la url que tienes añadida dice algo así como:
http://i779.photobucket.com/albums/yy76/DIABLEPITU/cistellapremiada1.jpg?t=1302284563

Y sería así:
http://i779.photobucket.com/albums/yy76/DIABLEPITU/cistellapremiada1.jpg

Responder
PACHAMAMA SANT ANDREU

Acabo de probar lo que me acomsejas pero se queda igual.
es como si la zoma donde estan los botones fuera una plantilla y estubiera preestablecido el fondo en color blanco en vez de transparente .
Yo se muy poco de esto y quiza lo que digo es una chorradilla pero parece algo asi

Muchas gracias por tu paciencia

Responder
Gem@

:: En efecto es un color de fondo que está añadido en:
.tabs-inner .widget ul {
background: #f5f5f5 url(http://www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: 1px solid #eeeeee;
margin-top: 0;
margin-left: -30px;
margin-right: -30px;
}

Sustituye el color de background: #f5f5f5 por background:transparent
Y el valor de:
border-bottom: 1px solid #eeeeee; por
border-bottom: 0px solid #eeeeee;

Luego en:
.tabs-inner .widget li a {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
color: #999999;
display: inline-block;
font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
padding: 0.6em 1em;
}

sustituye el valor de :
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EEEEEE;
a 0px

Creo que con eso se soluciona todo :)

Responder
PACHAMAMA SANT ANDREU

Muchas gracias Gema
El problema se ha solucionado como puedes ver el el blog .
Solo queda una cosilla . El texto de las pestañas de la derecha se ven con una letra muy pequeña que cuesta de leer y en color negro cuando en el que tu muestras esta´en más grande y en otro color . Sabrías decirme porque pasa eso?

Muchas gracias por tu paciencia

Responder
PACHAMAMA SANT ANDREU

SE ME OLVIDABA
La direccion del blog es www.pachamamasap.com

Responder
Gem@

:: La solución es cambiar el color en:
.tabs-inner .widget li a {
color: #000000;
....
....
....

Pero, entonces te cambiará también el color de los enlaces del menú de texto que tienes más arriba así que puedes probar en los estilos del menú de imágenes añadiendo color y forzando esos estilos que se muestren así por ejemplo añadiendo la línea en negrita en:
.rotator ul li a{
color:#FFFFFF !important;
aquí van el resto de los estilos que no hay que tocar
}

Si no te resulta mira esta entrada que igual puede serte útil:
http://ciudadblogger.com/2011/03/como-usar-cualquier-menu-en-las.html

Responder
EpideMia

hola gema!!!

depues de varios intentos ya está funcionando.
siempre tengo algun problema con jQuery.
pero ya está andando.

espero que te guste. lo tengo solo para que se vea en la portada.

cha gracias!!!

Responder
Gem@

:: Genial EpideMia, es un menú muy llamativo buena idea la de mostrarlo en el home :)

Responder
Felipe Calvo Cepeda

Precioso Julia, es en realidad un menu muy bonito para incluir en el home del blog. :D
Agregado y funcionando en un blog secreto, jeje.
Saludos y gracias.

Responder
Gem@

:: Perfecto si funciona Felipe, no te confíes demasiado que en la red pocas cosas son secretas :)

Responder
Felipe Calvo Cepeda

Jajaja lo tendré en cuenta.
¿Sabes que noté con las pruebas de este menú?
Funciona perfectamente en todos los navegadores, pero en IE7 y 8 si lo ves directamente en tu blog de jQuery no se ve, pero si lo incrustas en un iframe y lo metes en otro blog, como en esta entrada, se ve muy bien. :D

Responder
Gem@

:: Yo me veo casi obligada a mostrar todos los ejemplos de jQuery en un iframe de ahí que tengamos que ver bien la librería que vamos a usar porque luego pasan estas cosas :S

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top